<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-04-16 17:12:35
-->
<template>
  <drawer-box>
    <template v-slot:content>
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :rules="rules"
        :model="formData"
        size="mini"
        ref="nodeForm"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input v-model.trim="formData.name" size="mini" maxlength="40"></el-input>
        </el-form-item>
        <!--<el-form-item label="开始语音" prop="name">-->
        <!--<el-input v-model="formData.startRecordName" size="mini" disabled maxlength="40"></el-input>-->
        <!--</el-form-item>-->
        <el-form-item prop="timeout">
          <template v-slot:label>
            <span>
              录音超时
              <el-tooltip :show-after="500" placement="top" content="录音超时系统会自动播放超时语音，然后自动挂机">
                <i class="MC_iconfont MC_icon-yiwen-mian tip-span"></i>
              </el-tooltip>
            </span>
          </template>
          <el-input v-model="formData.timeout" type="number" size="mini">
            <template v-slot:append>秒</template>
          </el-input>
        </el-form-item>
        <!--<el-form-item label="超时录音" prop="name">-->
        <!--<el-input v-model="formData.timeOutRecordName" size="mini" disabled maxlength="40"></el-input>-->
        <!--</el-form-item>-->
      </el-form>
    </template>
    <template v-slot:operation>
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template v-slot:remove>
      <el-button @click="deleteNode" type="danger" :icon="Delete" size="mini">删除</el-button>
    </template>
  </drawer-box>
</template>

<script lang="ts" setup>
import drawerBox from '@/app/call-center/components/drawer-box.vue'
import { withDefaults, defineProps, ref } from 'vue'
import { Delete } from '@element-plus/icons-vue'
import useNodeCommon from './use-node-common'
const nodeForm = ref(null)
const props = withDefaults(
  defineProps<{
    data: any
    currentNode: any
    save: (...arg: any) => void
    cancel: () => void
    delete: (...arg: any) => void
  }>(),
  {
    data: {},
    currentNode: {}
  }
)
const { labelPosition, rules, formData, cancel, onSubmit, deleteNode } = useNodeCommon({
  data: props.data,
  currentNode: props.currentNode,
  nodeForm,
  save: props.save,
  cancel: props.cancel,
  delete: props.delete
})
// eslint-disable-next-line no-undef
defineExpose({
  form: nodeForm
})
</script>

<style lang="stylus" scoped>
.audioProgress
  margin 0 10px 0
.tip-span
  color $icon-gray
  cursor pointer
  margin-left 4px
  font-size 14px
</style>
